<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"  
      xmlns:h="http://java.sun.com/jsf/html"  
      xmlns:f="http://java.sun.com/jsf/core"  
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:t="http://myfaces.apache.org/tomahawk">  
    <ui:composition template="/templates/layout.xhtml">
        <ui:define name="content">            
            <div class="block">
                <div class="navbar navbar-inner block-header">
                    <div class="muted pull-left"><t:outputText value="#{courseManageBean.course.courseName}"/>
                    </div>
                </div>

                <div class="block-content collapse in">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                                <fieldset>
                                    <legend><h:outputText value="Thông tin"/></legend>
                                </fieldset>
                            </a>
                        </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse in">
                        <div class="form-horizontal">
                            <div class="control-group">
                                <label class="control-label" for="txtLastName"><h:outputText value="Họ:"/> </label>
                                <div class="controls">
                                    <h:inputText styleClass="span4" id="txtLastName"  value="#{coursePupilDetail.lastName}"/>

                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="txtFirstName"><h:outputText value="Tên:"/> </label>
                                <div class="controls">
                                    <h:inputText styleClass="span3" id="txtFirstName"  value="#{coursePupilDetail.firstName}"/>
                                </div>
                            </div>

                            <div class="control-group">
                                <label class="control-label" for="txtMobile"><h:outputText value="SĐT:"/><i class="icon-headphones"></i> </label>
                                <div class="controls">
                                    <h:inputText styleClass="span3" id="txtMobile"  value="#{coursePupilDetail.mobile}"/>
                                </div>
                            </div>

                            <div class="control-group">
                                <label class="control-label" for="txtParentName"><h:outputText value="SĐT:"/><i class="icon-headphones"></i> </label>
                                <div class="controls">
                                    <h:inputText styleClass="span3" id="txtParentName"  value="#{coursePupilDetail.parentName}"/>
                                </div>
                            </div>

                            <div class="control-group">
                                <label class="control-label" for="txtStatus"><h:outputText value="Trạng Thái:"/><i class="icon-headphones"></i> </label>
                                <div class="controls">
                                    <h:inputText styleClass="span3" id="txtStatus"  value="#{coursePupilDetail.status}"/>
                                </div>
                            </div>

                            <div class="control-group">
                                <label class="control-label" for="txtRegistedOn"> <h:outputText value="Thời Gian Đăng Ký"/> <i class="icon-envelope"></i></label>
                                <div class="controls">
                                    <t:inputText styleClass="span3" id="txtDateInput" readonly="true" value="#{coursePupilDetail.registedOn}" >
                                        <f:convertDateTime pattern="dd/MM/yyyy hh:mm" />
                                    </t:inputText>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <t:div styleClass="block" rendered="#{coursePupilBean.pupilActionType=='1'}">
                <div class="navbar navbar-inner block-header">
                    <div class="muted pull-left"><t:outputText value="Học phí"/>
                    </div>
                </div>
                <div class="block-content collapse in">
                    <div class="form-horizontal">
                        <t:dataTable id="tblPupilCourseFee" value="#{coursePupilBean.coursePupilFeeTableItem}" var="cursor" styleClass="table table-hover"
                                     preserveSort="true" rows="10"
                                     rowIndexVar="rowIndex" >
                            <t:column>
                                <f:facet name="header">
                                </f:facet>
                                <t:selectOneRow groupName="selectRadioGroup1" />
                            </t:column>
                            <t:column>
                                <f:facet name="header">
                                    <t:outputText value="ID"/>
                                </f:facet>
                                <h:outputText value="#{cursor.ui.id}">
                                </h:outputText>
                            </t:column>
                            <t:column>
                                <f:facet name="header">
                                    <t:outputText value="Tháng"/>
                                </f:facet>
                                <t:outputText value="Tháng #{cursor.ui.month}"/>
                            </t:column>
                            <t:column>
                                <f:facet name="header">
                                    <h:outputText value="Số Tiền"/>
                                </f:facet>
                                <t:inputText value="#{cursor.ui.amount}" styleClass="span6" disabled="true"/>
                            </t:column>
                            <t:column>
                                <f:facet name="header">
                                    <h:outputText value="Trạng Thái"/>
                                </f:facet>
                                <t:outputText value="#{cursor.ui.paidStatus=='F'?'Đóng đủ':'Thiếu'}" />
                            </t:column>
                            <t:column>
                                <f:facet name="header">
                                    <h:outputText value="Ngày Đóng"/>
                                </f:facet>
                                <t:outputText value="#{cursor.ui.paidOn}" />
                            </t:column>
                            <f:facet name="footer">
                                <div class="row">
                                    <div class="span6" style="padding-left: 30px">
                                        <t:div styleClass="pagination pagination-left">
                                            <ul>
                                                <li>
                                                    <a id="updateFeeBtn" >Lưu</a> 
                                                    <t:commandLink  action="#{coursePupilBean.updateCourseFee}" value="LưuFFF" id="save" style="display: none;"/>
                                                </li>
                                                <li>
                                                    <t:commandLink  value="Hoá Đơn" action="#{coursePupilBean.exportReciept}"/>
                                                </li>

                                                <li>
                                                    <a onclick="window.history.back()"> Hủy</a>
                                                    
                                                  
                                                </li>

                                            </ul>
                                        </t:div>
                                    </div>
                                    <div class="span6">
                                    </div>
                                </div>
                            </f:facet>
                        </t:dataTable>
                    </div>
                </div>
            </t:div>


            <t:div styleClass="block" rendered="#{coursePupilBean.pupilActionType=='2'}">
                <div class="navbar navbar-inner block-header">
                    <div class="muted pull-left"><t:outputText value="Chọn Lớp "/>
                    </div>
                </div>
                <div class="block-content collapse in">
                    <div class="form-horizontal">
                        <t:dataTable id="tblSelectedCourse" value="#{courseManageBean.pageData}" var="cursor" styleClass="table table-hover"
                                     preserveSort="true" rows="10" sortColumn="#{courseManageBean.sort}" sortAscending="#{courseManageBean.sortAscending}"
                                     >
                            <t:column>
                                <f:facet name="header">
                                </f:facet>
                                <t:selectOneRow groupName="selectRadioGroup" />
                            </t:column>
                            <t:column>
                                <f:facet name="header">
                                    <t:commandSortHeader columnName="ui.id" arrow="true" styleClass="sortColumn">
                                        <h:outputText value="ID"/>
                                    </t:commandSortHeader>
                                </f:facet>
                                <h:outputText value="#{cursor.ui.id}">
                                </h:outputText>
                            </t:column>
                            <t:column>
                                <f:facet name="header">
                                    <t:commandSortHeader columnName="ui.courseName" arrow="true" styleClass="sortColumn">
                                        <h:outputText value="Tên Khóa Học"/>
                                    </t:commandSortHeader>
                                </f:facet>
                                <h:outputText value="#{cursor.ui.courseName}"/> 
                            </t:column>
                            <t:column>
                                <f:facet name="header">
                                    <t:commandSortHeader columnName="ui.courseLevelName" arrow="true" styleClass="sortColumn">
                                        <h:outputText value="Trình Độ"/>
                                    </t:commandSortHeader>
                                </f:facet>
                                <h:outputText value="#{cursor.ui.courseLevelName}">
                                </h:outputText>
                            </t:column>
                            <t:column>
                                <f:facet name="header">
                                    <t:commandSortHeader columnName="ui.courseTypeName" arrow="true" styleClass="sortColumn">
                                        <h:outputText value="Loại Khóa Học"/>
                                    </t:commandSortHeader>
                                </f:facet>
                                <h:outputText value="#{cursor.ui.courseTypeName}">
                                </h:outputText>
                            </t:column>
                            <t:column>
                                <f:facet name="header">
                                    <t:commandSortHeader columnName="" arrow="true" styleClass="sortColumn">
                                        <h:outputText value="Thời gian"/>
                                    </t:commandSortHeader>
                                </f:facet>
                                <h:outputText value="1">
                                </h:outputText>
                            </t:column>

                            <t:column>
                                <f:facet name="header">
                                    <t:commandSortHeader columnName="ui.status" arrow="true" styleClass="sortColumn">
                                        <h:outputText value="Trạng Thái"/>
                                    </t:commandSortHeader>
                                </f:facet>
                                <h:outputText value="#{cursor.ui.status}">
                                </h:outputText>
                            </t:column>
                            <f:facet name="footer">
                                <div class="row">
                                    <div class="span6" style="padding-left: 30px">
                                        <t:div styleClass="pagination pagination-left">
                                            <ul>
                                                <li>
                                                    <t:commandLink  value="Chọn" action="#{courseManageBean.changeCourse}"/>
                                                </li>
                                                <li>

                                                    <a type="reset" onclick="window.history.back()">Hủy</a>
                                                </li>
                                            </ul>
                                        </t:div>
                                    </div>
                                    <div class="span6">
                                        <t:div styleClass="pagination pagination-right">
                                            <ul>
                                                <li>
                                                    <t:commandLink  value="Previous"
                                                                    disabled="#{!courseManageBean.hasPreviousPage}"
                                                                    action="#{courseManageBean.previousPage}"/>
                                                </li>

                                                <li>
                                                    <t:commandLink  value="Next"
                                                                    disabled="#{!courseManageBean.hasNextPage}"
                                                                    action="#{courseManageBean.nextPage}" />
                                                </li>
                                                <li class="active"> <a href="#"><t:outputText value="#{courseManageBean.rowCount} row(s)"/></a>
                                                </li>
                                            </ul>
                                        </t:div>
                                    </div>
                                </div>

                            </f:facet>
                        </t:dataTable>
                    </div>
                </div>
            </t:div>

            <t:inputHidden id="txtSelectedID" value="#{coursePupilBean.coursePupilFeeID}"/>
            <t:inputHidden id="txtFeeAmount" value="#{coursePupilBean.fee}"/>
            <t:inputHidden id="txtSelectedNewCourse" value="#{courseManageBean.selectedNewCourseID}"/>
            <script type="text/javascript" language="JavaScript">
               
                $("#ppsForm\\:tblPupilCourseFee input:radio").each(function() {
                    var radioSelect = $(this);
                    radioSelect.click(function() {
                        $("#ppsForm\\:tblPupilCourseFee input[type=text]").attr('disabled', true);
                        var coursepupilID = $(this).parent().parent().find("td").eq(1).html();
                        $(this).parent().parent().find("input[type=text]").attr('disabled', false);
                        $("#ppsForm\\:txtSelectedID").val(coursepupilID);
                    });
                });

                $("#updateFeeBtn").click(function() {
                    $("#ppsForm\\:txtFeeAmount").val($('input:radio').filter(':checked').parent().parent().find("input[type=text]").val());
                    $("#ppsForm\\:tblPupilCourseFee\\:save").trigger("click");
                });

                $("#ppsForm\\:tblSelectedCourse input:radio").each(function() {
                    var radioSelect = $(this);
                    radioSelect.click(function() {
                        var tblSelectedCourseID = $(this).parent().parent().find("td").eq(1).html();
                        $("#ppsForm\\:txtSelectedNewCourse").val(tblSelectedCourseID);
                    });
                });

            </script>

        </ui:define>
    </ui:composition>        

</html>  